<template>
  <div ref="terminal" class="terminal"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import { io } from 'socket.io-client';

const terminal = ref(null);
const fitAddon = new FitAddon.FitAddon();
const socket = io('http://113.44.170.52:8080'); // 后端 WebSocket 地址

onMounted(() => {
  const term = new Terminal();
  term.loadAddon(fitAddon);
  term.open(terminal.value);
  fitAddon.fit();

  // 设置终端样式（可选）
  terminal.value.style.width = '100%';
  terminal.value.style.height = '100vh';
  terminal.value.style.backgroundColor = '#000';
  terminal.value.style.color = '#fff';

  // 连接建立时通知后端
  socket.on('connect', () => {
    term.write('\r\n🔗 WebSocket 连接已建立\r\n');
    // 可以在这里发送初始化命令，如认证信息
  });

  // 接收来自服务器的数据并写入终端
  socket.on('data', (data) => {
    term.write(data);
  });

  // 监听终端输入并发送到服务器
  term.onData((data) => {
    socket.emit('data', data);
  });

  // 处理窗口大小变化
  window.addEventListener('resize', () => {
    fitAddon.fit();
    socket.emit('resize', {
      cols: term.cols,
      rows: term.rows,
    });
  });

  // 清理工作（可选）
  onUnmounted(() => {
    socket.disconnect();
    term.dispose();
  });
});
</script>

<style scoped>
/* 样式已经在 script 中设置 */
</style>